<script  setup>
import { ref, onMounted } from 'vue'
import { getChatInfoAPI } from '@/apis/chatAPI'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
// 导入ChatSend组件
import ChatSend from '@/views/Chat/components/ChatSend.vue'
const route = useRoute()
const chatInfoList = ref([])
const getChatInfo = async (friendId = route.params.friendId) => {
  const res = await getChatInfoAPI(friendId)
  chatInfoList.value = res.data
  // console.log(chatInfoList.value);

}
onMounted(() => getChatInfo())
// 不用刷新直接更新路由
onBeforeRouteUpdate((to) => {
  getChatInfo(to.params.friendId)
})

</script>

    
<template>
  <div class="chat">
    <div class="head">
      <h1>{{ chatInfoList[0]?.friendNodes }}</h1>
    </div>
    <ul infinite-scroll-immediate="true" class="infinite-list" style="overflow: auto">
      <li v-for="i in chatInfoList" :key="i.chatId" class="infinite-list-item">{{ i.friendId }}
      
      <div class="right">1111</div>
      
      </li>

    </ul>
    <ChatSend :message="chatInfoList[0]?.friendId"></ChatSend>
    
  </div>
</template>


<style lang="scss" scoped>
.chat {
  height: 100vh;
  background: red;

  // 头部
  .head {
    width: 100%;
    height: 10vh;
    background-color: pink;

    h1 {
      margin-left: 2vw;
      line-height: 10vh;
      font-weight: normal;
      font-size: 2vw;
    }
  }




  // 聊天框
  .infinite-list {
    height: 70vh;
    padding: 0;
    margin: 0;
    list-style: none;

    .infinite-list-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 4vw;
      background: var(--el-color-primary-light-9);
      margin: 0.1vw 0vw;
      color: var(--el-color-primary);
      // 自己的聊天框
      .right{
        
        width: 4vw;
        height: 4vw;
        background-color: green;
      }
    }
  }

 
}


// 隐藏滚动条
::-webkit-scrollbar {
  display: none;
}
</style>